<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <title>湖南省自来水公司营销管理信息系统</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../css/reset.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/text.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/form.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/buttons.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/grid.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/layout.css" type="text/css" media="screen" title="no title"/>

    <link rel="stylesheet" href="../css/ui-darkness/jquery-ui-1.8.12.custom.css" type="text/css" media="screen"
          title="no title"/>
    <link rel="stylesheet" href="../css/plugin/jquery.visualize.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/plugin/facebox.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/plugin/uniform.default.css" type="text/css" media="screen" title="no title"/>
    <link rel="stylesheet" href="../css/plugin/dataTables.css" type="text/css" media="screen" title="no title"/>
    <script src="/webjars/vue/2.5.17/dist/vue.js"></script>
    <script src="../layui/layui.all.js"></script>
    <link rel="stylesheet" href="../css/custom.css" type="text/css" media="screen" title="no title">


</head>

<body>

<div id="wrapper">

    <div id="bool"><script>window.onload=function (){  $("#bool").load("../ming.html");}</script></div>

    <div id="content" class="xgrid">

        <div class="x12">

            <h2>月资金回收情况报表</h2>

            <div class="searchDiv">
                选择月份 <select class="medium" id="year">
                <option value="">所有</option>
                <option v-for="between in betweenList" :value="between" v-text="between"></option>
            </select>

                <button class="btn btn-small btn-icon btn-find"  @click="query()"><span></span>查询</button>
            </div>

            <div class="reportTitle">
                月资金回收情况报表
            </div>
            <table class="report">
                <thead>
                <tr>
                    <th width="100">年月</th>
                    <th width="120">总吨位</th>
                    <th width="120">总应收</th>
                    <th width="120">总实收</th>
                    <th width="120">下欠</th>
                    <th width="80">回收率</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="r in recoveryList">
                    <td class="center" v-text="r.year"></td>
                    <td class="right"><span v-text="r.totalTons"></span>吨</td>
                    <td class="right"><span v-text="r.totalDue"></span>元</td>
                    <td class="right"><span v-text="r.totalReceived"></span>元</td>
                    <td class="right"><span v-text="r.totalMoneyOwed"></span>元</td>
                    <td class="right" v-text="r.recoveryRate"></td>
                </tr>
                </tbody>
            </table>
        </div> <!-- .x12 -->

    </div> <!-- #content -->

    <div id="footer">
        <div class="content_pad">
            <p>&copy; 2013-11 版权所有 <a href="#">湖南省自来水公司</a>. 技术支持 <a href="#">职业教育</a>.</p>
        </div> <!-- .content_pad -->
    </div> <!-- #footer -->

</div> <!-- #wrapper -->
<script type="text/javascript">
    var $ = layui.jquery,
        layer = layui.layer,
        form = layui.form;

    //条件查询
    function load(year) {
        var index = layer.load(0, {shade: false});
        $.ajax({
            type: 'GET',
            url: "/py-bill/getFundRecovery",
            data: {"year": year},
            dataType: 'JSON',
            success: function (json) {
                if (json.code == 200) {
                    app.recoveryList = json.data.recoveryList;
                } else {
                    layer.msg(json.message, {icon: 2})
                }
                layer.close(index)
            }
        });
    }
    //获取查询条件的时间区间
    function getYearMonth() {
        $.ajax({
            type: 'GET',
            url: "/py-bill/getYearMonth",
            // data:,
            dataType: 'json',
            success: function (json) {
                if (json.code == 200) {
                    app.betweenList = json.data.betweenList;
                } else {
                    layer.msg(json.message, {icon: 2})
                }
            },
        });
    }

    var app = new Vue({
        el: "#wrapper",
        data: {
            recoveryList: '',
            betweenList:'',
        }, methods: {
            //条件查询
            query(year) {
                var year = $("#year").val();
                load(year);
            }
        }, created() {
            load();
            getYearMonth();
        }
    });

</script>
<script src="../js/jquery/jquery-1.5.2.min.js"></script>
<script src="../js/jquery/jquery-ui-1.8.12.custom.min.js"></script>
<script src="../js/misc/excanvas.min.js"></script>
<script src="../js/jquery/facebox.js"></script>
<script src="../js/jquery/jquery.visualize.js"></script>
<script src="../js/jquery/jquery.dataTables.min.js"></script>
<script src="../js/jquery/jquery.tablesorter.min.js"></script>
<script src="../js/jquery/jquery.uniform.min.js"></script>
<script src="../js/jquery/jquery.placeholder.min.js"></script>

<script src="../js/widgets.js"></script>
<script src="../js/dashboard.js"></script>

<script type="text/javascript">

    $(document).ready(function () {
        Dashboard.init();

    });


</script>

</body>

</html>